<template>
  <div class="InitiateContentArea">
    <ul class="messages" ref="chatContainer">
      <template v-for="(n, k) in InitiateContentList">
        <InitiateContent 
          @getForm1="getForm1" 
          @step2Compelete="step2Compelete" 
          :formList="n.InitiateContentFormList"
          :describe="n.InitiateContentDescribe" 
          ref="initiateContent"
          :InitiateContentDescribe="n.InitiateContentDescribe" 
          :type="n.InitiateContentType" 
          class="message" 
          :key="k"
        >
          {{ n }}
        </InitiateContent>
      </template>
    </ul>
    <div class="btn_confirm_area box_shadow">
      <a-form-model layout="inline" :model="form" ref="ruleForm">
        <a-row type="flex">
          <a-col flex="auto">
            <a-form-model-item style="width:100%" prop="textareaValue"
              :rules="{ required: true, message: ' ', trigger: 'blur' }">
              <a-input size="small" :autosize="false" type="textarea" style="width:100%;resize: none;border:none;"
                placeholder="请输入..." v-model="form['textareaValue']"
                @keydown.enter.native.prevent="handleSubmit"
                />
            </a-form-model-item>
          </a-col>
          <a-col flex="80px">
            <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
              <a-button type="danger" @click="handleSubmit">
                确定
              </a-button>
            </a-form-model-item></a-col>
        </a-row>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import InitiateContent from '@/components/InitiateContent.vue';
export default {
  components: { InitiateContent },
  name: 'initiateContent',
  props: {
  },
  data() {
    return {
      flag: true,
      InitiateContentList: [
        {
          InitiateContentFormList: [
            { name: "学科", key: "学科", optionsList: [{ name: "语文", value: "语文" }, { name: "数学", value: "数学" }, { name: "英语", value: "英语" }, { name: "自然", value: "自然" }] },
            { name: "学段", key: "学段", optionsList: [{ name: "小学", value: "小学" }, { name: "中学", value: "中学" }, { name: "高中", value: "高中" }] },
            { name: "年级", key: "年级", optionsList: [{ name: "一年级", value: "一年级" }, { name: "二年级", value: "二年级" }, { name: "三年级", value: "三年级" },] },
            { name: "课时", key: "课时", optionsList: [{ name: "1课时", value: "1" }, { name: "2课时", value: "2" }, { name: "3课时", value: "3" },] },
            { name: "总课时", key: "总课时", optionsList: [{ name: "1", value: "1" }, { name: "2", value: "2" }, { name: "3", value: "3" }] },
            { name: "教材", key: "教材", optionsList: [{ name: "人教版", value: "人教版" }, { name: "苏教版", value: "苏教版" }, { name: "北师大版", value: "北师大版" }] },
            { name: "单元", key: "单元", optionsList: [{ name: "第一单元", value: "第一单元" }, { name: "第二单元", value: "第二单元" }, { name: "第三单元", value: "第三单元" }] },
            { name: "课文", key: "课文", optionsList: [{ name: "第一篇", value: "第一篇" }, { name: "第二篇", value: "第二篇" }, { name: "第三篇", value: "第三篇" }] },
          ],
          InitiateContentDescribe: "尊敬的X教刻师，我是您的AI教学助手，可以辅助您撰写教学设计。请问您接下来为哪个学科、哪个年级的哪节课的哪个课时制定教学计划呢？",
          InitiateContentType: "1"
        },
        // {
        //   InitiateContentFormList: [
        //     { name: "学生人数", key: "学生人数" },
        //     { name: "本节课掌握程度", key: "本节课掌握程度", optionsList: [{ name: "从未学过", value: "从未学过" }, { name: "学过一些", value: "学过一些" }] },
        //     { name: "先验知识掌握水平", key: "先验知识掌握水平", optionsList: [{ name: "较差", value: "较差" }, { name: "较好", value: "较好" }, { name: "一般", value: "一般" }] },
        //     { name: "学生水平差异", key: "学生水平差异", optionsList: [{ name: "较大", value: "较大" }, { name: "较小", value: "较小" }, { name: "一般", value: "一般" }] },
        //     { name: "对学习内容态度", key: "对学习内容态度", optionsList: [{ name: "态度被动消极", value: "态度被动消极" }, { name: "态度极好", value: "态度极好" }, { name: "态度一般", value: "态度一般" }] },
        //     { name: "学习动机", key: "学习动机", optionsList: [{ name: "较强", value: "较强" }, { name: "一般", value: "一般" }, { name: "较弱", value: "较弱" }] },
        //   ],
        //   InitiateContentDescribe: "好的，请进一步分享输入您所授班级的学生们的实际学习情况，这样我才能更准确地为您量身定制合适的教学设计方案。",
        //   InitiateContentType: "2"
        // },
        // {
        //   InitiateContentDescribe: "非常感谢您配合完成了初步的教学内容分析和学情分析，请问您认为初步强写的结果是否还需要修改？如果认为这部分已经准备充分，我们可以继续撰写教学目标和教学评价：如果有任何问题，您也可以直接在右则编辑区修改。",
        //   InitiateContentType: "3"
        // },
        
      ],

      form: { textareaValue: "" },

      form1: {},
      form2: {},
    }
  },
  computed: {
    jxnr() {
      return this.$store.state.jxnr
    },
    xqfx() {
      return this.$store.state.xqfx
    },
    jxmb() {
      return this.$store.state.jxmb
    },
    jxpj() {
      return this.$store.state.jxpj
    },
    jxgc() {
      return this.$store.state.jxgc
    },
    jcjj() {
      return this.$store.state.jcjj
    },
    jxsjzl() {
      return this.$store.state.jxsjzl
    },
    sessionId() {
      return this.$store.state.sessionId
    },
  },
  mounted() {
    this.scrollToBottom();
  },
  methods: {

    changeInitpush(e) {
      this.InitiateContentList.push({
        InitiateContentDescribe: e,
        InitiateContentType: "3"
      })
      this.$nextTick(() => {
        this.scrollToBottom();
      })
    },
    getForm1(data) {
      let obj =  {
        InitiateContentFormList: [
          { name: "学生人数", key: "学生人数" },
          { name: "本节课掌握程度", key: "本节课掌握程度", optionsList: [{ name: "从未学过", value: "从未学过" }, { name: "学过一些", value: "学过一些" }] },
          { name: "先验知识掌握水平", key: "先验知识掌握水平", optionsList: [{ name: "较差", value: "较差" }, { name: "较好", value: "较好" }, { name: "一般", value: "一般" }] },
          { name: "学生水平差异", key: "学生水平差异", optionsList: [{ name: "较大", value: "较大" }, { name: "较小", value: "较小" }, { name: "一般", value: "一般" }] },
          { name: "对学习内容态度", key: "对学习内容态度", optionsList: [{ name: "态度被动消极", value: "态度被动消极" }, { name: "态度极好", value: "态度极好" }, { name: "态度一般", value: "态度一般" }] },
          { name: "学习动机", key: "学习动机", optionsList: [{ name: "较强", value: "较强" }, { name: "一般", value: "一般" }, { name: "较弱", value: "较弱" }] },
        ],
        InitiateContentDescribe: "好的，请进一步分享输入您所授班级的学生们的实际学习情况，这样我才能更准确地为您量身定制合适的教学设计方案。",
        InitiateContentType: "2"
      }

      this.InitiateContentList.push(obj)

      this.form1 = data;
      this.$store.commit('setBtnLoading', false)

      this.$nextTick(() => {
        this.scrollToBottom();
      })

    },

    step2Compelete() {
      let obj = {
        InitiateContentDescribe: "非常感谢您配合完成了初步的教学内容分析和学情分析，请问您认为初步强写的结果是否还需要修改？如果认为这部分已经准备充分，我们可以继续撰写教学目标和教学评价：如果有任何问题，您也可以直接在右则编辑区修改。",
        InitiateContentType: "3"
      }
      if(this.flag) {
        this.InitiateContentList.push(obj)
        this.flag = false;
      }
    },

    scrollToBottom() {
      const container = this.$refs.chatContainer;
      container.scrollTop = container.scrollHeight;
    },

    searchData() {
      this.$store.commit(`setG_loading`, true);
      
      this.$axios.get(`/api/v1/chains/chat/search?session_id=${this.sessionId}`).then(res => {
        if (res.status == 200) {
          this.$store.commit(`setG_loading`, false);
          this.$store.commit(`setjxsjzl`, res.data);
          // console.log(this.$store.state.jxsjzl)
          // this.$set(this.formList[1], 'detailsList', res.data)
        }
      }).catch(err => {
        this.$message.error(err);
      })
    },

    handleSubmit(e) {
      // this.searchData();
      
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.InitiateContentList.push({
            InitiateContentDescribe: this.form['textareaValue'],
            InitiateContentType: "4"
          })

          this.$nextTick(() => {
            this.scrollToBottom();
            this.form['textareaValue'] = ''
          })

          let arr = ['好的', '好', '可以', '继续吧', '是'];
          console.log(this.form['textareaValue'], arr.includes(this.form['textareaValue']), "?")
          console.log(!this.jxnr, !this.xqfx, !this.jxmb, !this.jxpj, !this.jxgc)
          if (arr.includes(this.form['textareaValue'])) {
            
            
            if (!this.jxnr) {
              return false
            } else if (!this.xqfx) {
              return false
            } else if (!this.jxmb) {
              this.$refs.initiateContent[0].chat("jxmb", this.sessionId);
            } else if (!this.jxpj) {
              this.$refs.initiateContent[0].chat("jxpj", this.sessionId);
            } else if (!this.jxgc) {
              this.$refs.initiateContent[0].chat("jxgc", this.sessionId);
            } else if (!this.jcjj) {
              this.$refs.initiateContent[0].chat("jcjj", this.sessionId);
            } else if (!this.jxsjzl) {
              this.searchData();
            }else {
              console.log('aaaaaaaaaa')
            }
          } else {
            
            setTimeout(() => {
              this.InitiateContentList.push({
                InitiateContentDescribe: "我们还是专心做教学设计吧，请您确认教学内容分析和学情分析是否还有问题，如果没有，下面我可以开始帮您撰写教学目标了吗？",
                InitiateContentType: "3"
              })
              this.$nextTick(() => {
                this.scrollToBottom();
              })
            }, 1000)

            
          }
        }
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

/deep/ .ant-form-inline .ant-form-item-with-help {
  margin-bottom: 0 !important;
}
/deep/ .ant-form-explain {
  display: none !important;
}
.InitiateContentArea {
  position: relative;
  padding-bottom: 60px !important;
  box-sizing: border-box;
  height: 100%;
  width: 100%;

  .messages {
    width: 100%;
    height: 100%;
    overflow-y: scroll;

    ::-webkit-scrollbar {
      display: none;
    }

    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-left:0;
  }

  .btn_confirm_area {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    width: 96%;
    background: #fff;
    left: 2%;
    bottom: 6px;

    textarea {
      margin: 0;
      border: none;
    }

    button {
      margin-top: 9px;
    }
  }
}
</style>